---
import AstroTweet from './Tweet/Tweet.astro'
import type { ComponentProps } from 'astro/types'
export type Props = ComponentProps<typeof AstroTweet>
---

<AstroTweet {...Astro.props} />

<style is:global>
	.Tweet {
		--tweet-bg-color-hover: var(--tweet-bg-color);
		--tweet-font-family: inherit;
		--tweet-body-font-size: 1rem;
		--tweet-container-margin: 0;
		--tweet-border: 1px solid theme(colors.zinc.200);
		--tweet-font-color-secondary: theme(colors.zinc.500);
		max-width: none;

		@apply dark:[--tweet-bg-color:theme(colors.zinc.900)] dark:[--tweet-border:1px_solid_theme(colors.zinc.800)] dark:[--tweet-font-color-secondary:theme(colors.zinc.400)];
	}

	.Tweet [class*='actions'] {
		border-top: none;
	}
	.Tweet [class*='rounded'] {
		border: none;
		position: relative;
	}

	.Tweet [class*='like']:hover > [class*='likeCount'] {
		text-decoration: none;
	}
	.Tweet [class*='rounded'] {
		@apply rounded-lg;
	}

	.Tweet [class*='rounded']::after {
		content: '';
		inset: 0;
		width: 100%;
		height: 100%;
		position: absolute;
		border-radius: inherit;
		pointer-events: none;
		--border-color: theme(colors.black/.1);
		box-shadow: inset 0 0 0 1px var(--border-color);

		@apply dark:[--border-color:theme(colors.white/.1)];
	}
	.Tweet p {
		white-space: pre-line !important;
	}
</style>
